<template>
    <div class="home-container">
      <!-- 文章列表 -->
      <el-card 
        v-for="article in articles" 
        :key="article.id" 
        class="article-card"
      >
        <!-- 文章标题 -->
        <h2 class="article-title">{{ article.title }}</h2>
        
        <!-- 文章摘要 -->
        <p class="article-summary">{{ article.summary }}</p>
        
        <!-- 文章元信息（发布时间、阅读量、查看按钮） -->
        <div class="article-meta">
          <span class="meta-item">
            <i class="el-icon-date"></i> {{ article.createTime }}
          </span>
          <span class="meta-item">
            <i class="el-icon-view"></i> 阅读量：{{ article.views }}
          </span>
          <el-button 
            type="primary" 
            size="small" 
            @click="goToDetail(article.id)"
          >
            查看全文 →
          </el-button>
        </div>
      </el-card>
  
      <!-- 分页控件 -->
      <el-pagination
        class="pagination"
        :current-page="currentPage" 
        :page-size="pageSize"       
        :total="total"              
        layout="prev, pager, next" 
        @current-change="handlePageChange"  
      ></el-pagination>
    </div>
  </template>


<script>
import request from '@/utils/request'

export default {
    data(){
        return {
            articles:[],
            currentPage: 1,
            pageSize:5,
            total:0
        }
    },
    async created() {
        await this.fetchArticles()
    },
    methods: {
        async fetchArticles() {
            try {
                const res = await request.get('/articles', {
                    params: {
                        _page:this.currentPage,
                        _limit:this.pageSize,
                        _sort:'views',
                        _order:'desc'
                    }
                })
                console.log('响应数据:', res.data)       // 打印文章数据
                console.log('响应头:', res.headers)     // 打印x-total-count
                this.total = parseInt(res.headers['x-total-count'])
                this.articles = res.data
            } catch(error) {
                console.error("获取文章失败:",error)
                this.$message.error('加载文章列表失败，请稍后重试')
            }
        },
        handlePageChange(page) {
            this.currentPage = page
            this.fetchArticles()
        },
        goToDetail(articleId) {
            this.$router.push(`/article/${articleId}`)
        }
    }
}
</script>



<style scoped lang="scss">
.home-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.article-card {
    margin-bottom: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.25s;


    &:hover {
        transform: translateY(-3px);
    }
}

.article-title {
    color:#303133;
    font-size:24px;
    margin-bottom:15px;
}

.article-summary {
    color: #606266;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.article-meta {
    display:flex;
    align-items: center;
    justify-content: space-between;
    color: #909399;
    font-size:14px;

    .meta-item {
        margin-right: 20px;
        i {
            margin-right:5px;
        }
    }
}

.pagination {
    margin-top: 30px;
    text-align: center;
}




</style>